
'use-client'
import {useState} from 'react'
import { Tag } from 'antd'
import Image from 'next/image'
import './index.scss'
export interface CardItem{
    id:number
    title:string
    content:string
    img:string
    time:string
    author:string
    tag:string
}
interface CardProps{
    list:CardItem[]
}
export default function Card({list}:CardProps){
    return <div className='card-container mt-4'>
        {
            list.map((item,index) => (
                <div key={item.id} className={`card-item flex  pb-4 ${index === list.length - 1 ? '' : 'border-b-1 border-gray-100'}
                ${index !==0 ? 'mt-4' : ''}
                `
                }>
                    <div className='w-5/6'>
                        <div className='card-item-title text-sm font-bold mt-2'>{item.title}</div>
                        <div className='card-item-content text-sm mt-2 text-gray-500'>{item.content}</div>
                        <div className='flex mt-2'>
                           <div className='flex w-7/8'>
                                <div className='text-sm text-gray-500 mr-2'>日期：{item.time}</div>
                                <div className='text-sm text-gray-500'>作者：{item.author}</div>
                           </div>
                           <div className='text-sm text-gray-500 w-1/8 text-right'>
                            <Tag color="blue" bordered={false}>{item.tag}</Tag>
                           </div>
                        </div>
                    </div>
                    <div className='w-1/6'>
                        <Image src={item.img} alt={item.title} width={100} height={100} className='img' />
                    </div>
                </div>
            ))
        }
    </div>
}